<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
var echarts = require('echarts')
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getDiffLevel} from '@/api/user'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    },

  },
  data() {
    return {
      chart: null,
      chartData:[]
     
    }
  },
    watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart()
      }, 1000)
    
     
      
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {

      this.chart = echarts.init(this.$el, 'macarons')

       this.setOptions(this.chartData)
    
    

      
    },
    setOptions(datas){
        this.chart.setOption({
        tooltip: {
          trigger: 'item',
         color: "black",
        textStyle : {
            color: '#fff',
          
        },

          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['青铜会员', '白银会员', '黄金会员', '铂金会员', '钻石会员','傲世宗师会员','超凡大师会员','王者会员','永久会员']
        },
        series: [
          {
            name: '会员等级分布',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '35%'],
            data:datas,
            // [
            //   { value: 2, name: '青铜会员' },
            //   { value: 1, name: '白银会员' },
            //   { value: 1, name: '黄金会员' },
            //   { value: 1, name: '铂金会员' },
            //   { value: 1, name: '钻石会员' },
            //    { value: 1, name: '傲世宗师会员' },
            //   { value: 1, name: '超凡大师会员' },
            //   { value: 1, name: '王者会员' },
            //   { value: 1, name: '永久会员' },
            
            // ]
            animationEasing: 'cubicInOut',
            animationDuration: 3000
          }
        ]
      })
    },
       async getlevel() {
      console.log("获取会员");
    await   getDiffLevel().then( (res) => {
        console.log(res);
        let arr = [];
        for (let i in res.data.data) {
          arr.push(res.data.data[i]);
        }
        console.log(arr);

        this.chartData = arr.map((item, index) => {
          let name = "";
         
          switch (index) {
            case 0:
              name = "永久会员";
              break;
            case 1:
              name = "王者会员";
              break;
            case 2:
              name = "超凡大师会员";
              break;
            case 3:
              name = "傲世宗师会员";
              break;
            case 4:
              name = "钻石会员";
              break;
            case 5:
              name = "铂金会员";
              break;
            case 6:
              name = "黄金会员";
              break;
            case 7:
              name = "白银会员";
              break;
            case 8:
              name = "青铜会员";
          }
          
          return {
            value: item,
            name: name,
          };
        });
        
      });
     
     
    },
  },
  created() {
    console.log('会员')
    this.getlevel();
  }
}
</script>
